<template>
    <!-- 
        对于v-if实现的条件渲染,只有当条件满足的时候才会渲染该资源 
    -->
    <!-- 每一个v-if都是独立存在的 -->
    <p v-if="age < 5">婴幼儿</p>
    <p v-if="age < 18">少年</p>
    <p v-if="age < 30">青年</p>
    <p v-if="age < 60">中年</p>
    <p v-if="age >= 60">中年</p>
    <hr>
    <!-- v-if、v-else-if、v-else是递进关系 -->
    <p v-if="age < 5">婴幼儿</p>
    <p v-else-if="age < 18">少年</p>
    <p v-else-if="age < 30">青年</p>
    <p v-else-if="age < 60">中年</p>
    <p v-else>老年</p>
    <hr>

    <!-- 对于v-show实现的条件渲染,不管条件是否满足,都会渲染该资源 -->
     <p v-show="flag">第一个段落</p>
     <!-- 
        当v-show的条件判断的值为false时,页面中依然会渲染该资源
        只是渲染资源之后,会通过display属性将该元素设置为隐藏元素
     -->
     <p v-show="!flag">第二个段落</p>
     <!-- <p style="display: block;">显示与隐藏</p> -->

</template>
<script setup>
import { ref } from 'vue';

const age = ref(18)
const flag = ref(true)
</script>